import $ from "jquery";
import * as echarts from "echarts";
import "./jquery-extensions";

/* eslint-disable */
(() => {
  let number = 90;
  $(function () {
    $("#vaderSize1").ProgressBarWars1({
      porcentaje: 30,
      estilo: "vader1",
      tiempo: 5980,
      alto: "8px",
      flag: true,
    });
    // setInterval(function () {
    //   number = Math.floor(Math.random() * 99 + 1);
    //   $("#vaderSize1").ProgressBarWars1({
    //     porcentaje: number,
    //     estilo: "vader1",
    //     tiempo: 5980,
    //     alto: "30px",
    //     flag: false,
    //   });
    // }, 5000);
  });
})();

(() => {
  let number = 60;
  $(function () {
    $("#vaderSize2").ProgressBarWars2({
      porcentaje: 30,
      estilo: "vader2",
      tiempo: 5980,
      alto: "8px",
      flag: true,
    });
    // setInterval(function () {
    //   number = Math.floor(Math.random() * 99 + 1);
    //   $("#vaderSize2").ProgressBarWars2({
    //     porcentaje: number,
    //     estilo: "vader2",
    //     tiempo: 5980,
    //     alto: "30px",
    //     flag: false,
    //   });
    // }, 5000);
  });
})();

(() => {
  let number = 90;
  $(function () {
    $("#vaderSize3").ProgressBarWars3({
      porcentaje: 30,
      estilo: "vader3",
      tiempo: 5980,
      alto: "8px",
      flag: true,
    });
    // setInterval(function () {
    //   number = Math.floor(Math.random() * 99 + 1);
    //   $("#vaderSize3").ProgressBarWars3({
    //     porcentaje: number,
    //     estilo: "vader3",
    //     tiempo: 5980,
    //     alto: "8px",
    //     flag: false,
    //   });
    // }, 5000);
  });
})();

(() => {
  let number = 60;
  $(function () {
    $("#vaderSize4").ProgressBarWars4({
      porcentaje: number,
      estilo: "vader4",
      tiempo: 5980,
      alto: "22px",
      flag: true,
    });
    // setInterval(function () {
    //   number = Math.floor(Math.random() * 99 + 1);
    //   $("#vaderSize4").ProgressBarWars4({
    //     porcentaje: number,
    //     estilo: "vader4",
    //     tiempo: 5980,
    //     alto: "22px",
    //     flag: false,
    //   });
    // }, 5000);
  });
})();

(() => {
  $("#vaderSize5").ProgressBarWars5({
    porcentaje: 16,
    estilo: "vader5",
    tiempo: 5980,
    alto: "8px",
    flag: true,
  });
})();

(() => {
  $("#vaderSize6").ProgressBarWars6({
    porcentaje: 16,
    estilo: "vader6",
    tiempo: 5980,
    alto: "8px",
    flag: true,
  });
})();

(() => {
  $("#vaderSize7").ProgressBarWars7({
    porcentaje: 6,
    estilo: "vader7",
    tiempo: 5980,
    alto: "8px",
    flag: true,
  });
})();

(() => {
  $("#vaderSize8").ProgressBarWars8({
    porcentaje: 2,
    estilo: "vader8",
    tiempo: 5980,
    alto: "8px",
    flag: true,
  });
})();

(() => {
  $("#vaderSize9").ProgressBarWars9({
    porcentaje: 83,
    estilo: "vader9",
    tiempo: 5980,
    alto: "8px",
    flag: true,
  });
})();

(() => {
  $("#vaderSize10").ProgressBarWars10({
    porcentaje: 6,
    estilo: "vader10",
    tiempo: 5980,
    alto: "8px",
    flag: true,
  });
})();

(() => {
  var salesMyChart = echarts.init($("#container1")[0]);
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal',
      left: 'center',
      textStyle: {
        color: "write",
        fontSize: 14
      }
    },
    series: [
      {
        top: 60,
        name: '报警数量',
        type: 'pie',
        radius: '80%',
        data: [
          { value: 1048, name: '粉料系统' },
          { value: 735, name: '搅拌系统' },
          { value: 580, name: '制浆系统' },
          { value: 484, name: '溶剂系统' },
          { value: 300, name: '浆料系统' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          show: false
        }
      }
    ]
  };
  salesMyChart.setOption(option);
})();

(() => {
  window.onload = function () {
    var loading = document.getElementById("loading");
    loading.style.display = "none";
  };
})();


